<template>
  <div class="order-list-children">
    <mt-header fixed title="评论">
      <router-link to="/user-orderlist?type=all" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div v-for="(item, index) of list" :key="index" class="mt-1" v-show="item.isRateable !== false">
      <mt-cell :title="item.name"></mt-cell>
      <div class="pinglun">
        <input type="radio" :id="'one' + index" value="好评" v-model="item.ass">
        <label :for="'one' + index">好评</label>
        <input type="radio" :id="'two' + index" value="中评" v-model="item.ass">
        <label :for="'two' + index">中评</label>
        <input type="radio" :id="'three' + index" value="差评" v-model="item.ass">
        <label :for="'three' + index">差评</label>
      </div>
      <mt-field class="border-top" label="评论内容" placeholder="请输入评论内容" type="textarea" rows="4" v-model="item.info"></mt-field>
      <div>
        <div class="mint-cell-wrapper" style="background: #fff;padding-bottom: .3rem">
          <div class="mint-cell-title"><!----><span class="mint-cell-text">评论图片</span><!----></div>
        </div>
        <div class="spBottom">
          <!-- <div class="upimg">
            <img class="sptopImg1" v-show="item.imga" :src="item.imga">
            <img class="sptopImg2" v-show="!item.imga" src="/static/img/upfile.png">
            <input
              class="upimg-item"
              type="file"
              name="imga"
              id=""
              accept="image/gif,image/jpeg,image/jpg,image/png"
              @change="changeImage($event, 'imga' , index)"
              ref="license"
            >
          </div> -->
          <uploader @getFiles="getImageList($event, item.goodsId, index)" :numLength="3"></uploader>
          <!-- <div class="upimg">
            <img class="sptopImg1" v-show="item.imgb" :src="item.imgb">
            <img class="sptopImg2" v-show="!item.imgb" src="/static/img/upfile.png">
            <input
            class="upimg-item"
            type="file"
            name="imgb"
            id=""
            accept="image/gif,image/jpeg,image/jpg,image/png"
            @change="changeImage($event, 'imgb' , index)"
            ref="openingPermit">
          </div>
          <div class="upimg">
            <img class="sptopImg1" v-show="item.imgc" :src="item.imgc">
            <img class="sptopImg2" v-show="!item.imgc" src="/static/img/upfile.png">
            <input
            class="upimg-item"
            type="file"
            name="imgc"
            id=""
            accept="image/gif,image/jpeg,image/jpg,image/png"
            @change="changeImage($event, 'imgc' , index)"
            ref="openingPermit">
          </div> -->
        </div>
      </div>
      <div class="text-center">
        <mt-button @click="handleClick(item.goodsId, index)" type="danger">评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import uploader from '../public/Upload'

export default {
  name: 'OrderListChildren',
  data () {
    return {
      introduction: '',
      pingLun: '',
      picked: '',
      list: [],
      imgList: []
    }
  },
  components: {
    uploader
  },
  methods: {
    getInfo () {
      axios.get('/meimai/interface/order/detail', {
        params: {
          id: this.$route.params.pid,
          memberId: this.$store.state.userId
        }
      }).then((res) => {
        // console.log(res)
        this.list = res.data.items
      })
    },
    handleClick (id, index) {
      // console.log(id)
      // console.log(index)
      // console.log(this.list[index])
      let datas = this.list[index]
      if (!datas.ass) {
        datas.ass = '好评'
      }
      var params = new URLSearchParams()
      params.append('memberId', this.$store.state.userId)
      params.append('orderId', this.$route.params.pid)
      params.append('goodsId', datas.goodsId)
      params.append('type', datas.ass)
      params.append('content', datas.info)
      this.imgList.forEach((item, i) => {
        if (i === 0) {
          params.append('imga', item)
        }
        if (i === 1) {
          params.append('imgb', item)
        }
        if (i === 2) {
          params.append('imgc', item)
        }
      })
      datas.isRateable = false
      axios.post('/meimai/interface/goods/rateGoods', params).then((res) => {
        let datas = res.data
        if (datas.code === 0) {
          this.$toast('评论成功')
          this.imgList = []
        } else {
          this.$toast(datas.msg)
        }
      })
      // let tGoodsRateDOs = '?memberId=' + this.$store.state.userId
      // let ass = []
      // let goodsId = []
      // let content = []
      // let imga = []
      // let imgb = []
      // let imgc = []
      // this.list.forEach((item, index) => {
      //   if (!item.ass) {
      //     item.ass = '好评'
      //   }
      //   ass[index] = item.ass
      //   goodsId[index] = item.goodsId
      //   content[index] = item.info
      //   imga[index] = item.imga
      //   imgb[index] = item.imgb
      //   imgc[index] = item.imgc
      //   // tGoodsRateDOs += '&tGoodsRateDOs[' + index + '].goodsId=' + item.goodsId
      //   // tGoodsRateDOs += '&tGoodsRateDOs[' + index + '].type=' + item.ass
      //   // tGoodsRateDOs += '&tGoodsRateDOs[' + index + '].content=' + item.info
      // })
      // console.log('goodsId', goodsId)
      // console.log('ass', ass)
      // console.log('imga', imga)
      // var params = new URLSearchParams()
      // params.append('memberId', this.$store.state.userId)
      // params.append('orderId', this.$route.params.pid)
      // params.append('goodsId', goodsId)
      // params.append('content', content)
      // params.append('imga', imga)
      // params.append('imgb', imgb)
      // params.append('imgc', imgc)
      // params.append('list', this.list)
      // axios.post('http://bjmeimai.aefyc.com:9999/meimai/interface/goods/rateGoods', params).then((res) => {
      //   let datas = res.data
      //   console.log(datas)
      //   if (datas.code === 0) {
      //     this.$toast('评论成功')
      //     this.$router.push('/user')
      //   } else {
      //     this.$toast(datas.msg)
      //   }
      // })
    },
    getImageList (files, item, index) {
      this.$nextTick(() => {
        for (let i = 0, len = files.length; i < len; i++) {
          this.imgList.push(files[i].src)
          // this.imgList.push(files[i].src.split('base64,')[1])
          // 上传图片
          //   this._getFileCode({
          //     Base64Str: files[i].src.split("base64,")[1],
          //     AttachmentType: this.$enums.AttachmentType.Activity
          //   });
        }
      })
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
.mint-header
  background: #ec2935
.order-list-children
  .mt-1
    margin-top: .6rem
  .pinglun
    background: #fff
    padding: .3rem
    label
      padding: .1rem
  .not-content
    margin: .2rem 0 1rem
    text-align: center
    width: 100%
    color: #999
  .text-center
    text-align: center
  .mint-button--danger
    text-align: center
    width: 80%
    padding: 10px
    margin-top: 0.3rem
.spBottom
  width: 100%
  display: flex
  justify-content: space-around
  padding-bottom: .3rem
  background: #fff
  .upimg
    background-color: #f3f3f3
    width: 2.2rem
    height: 1.5rem
    display: flex
    align-items: center
    justify-content: center
    overflow: hidden
    position: relative
    .sptopImg1
      width: 100%
      height: 100%
    .sptopImg2
      height: .5rem
      width: .5rem
    .upimg-item
      position: absolute
      top: 0
      left: 0
      opacity: 0
      width: 100%
      height: 100%
      z-index: 999
</style>
